import { Key, useRef } from 'react'
import { ProZoomTable } from '@zoom-design/zoom-design-demo'
// import I18n from '/@/wms/locale/locale.tsx'
// const i18n = I18n.i18n
import { useTranslation } from 'react-i18next'
import { Space } from 'antd'
import { ColumnsState, ProColumns } from '@ant-design/pro-components'
import HomeModal from '/@/wms/pages/home/modal.tsx'

/**
 *  表格列配置
 */
interface DataType {
  key: Key,
  orderId?: string,
  orderDate?: string,
  orderStatus?: string,
}


/**
 *  表格
 * @constructor
 */
const Home = () => {
  // const { t,language } = I18n.i18n
  const { t } = useTranslation()
  const actionRef = useRef()
  const columnsInit: ProColumns<DataType>[] = [
    {
      title: t('数据主键'),
      dataIndex: 'orderId',
      key: 'orderId',
      width: 100,
      search: false
    },
    {
      title: t('订单时间'),
      dataIndex: 'orderDateRange',
      valueType: 'dateTimeRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          console.log(value)
          return {
            startTime: value[0],
            endTime: value[1]
          }
        }
      }
    },
    {
      key: 'orderDate',
      title: 'orderDate',
      dataIndex: 'orderDate',
      valueType: 'dateTime',
      width: 200,
      hideInSearch: true
    },
    {
      key: 'orderStatus',
      title: 'orderStatus',
      dataIndex: 'orderStatus',
      initialValue: 'open',
      width: 200,
      valueEnum: {
        open: {
          text: '打开',
          status: 'Processing'
        },
        close: {
          text: '关闭',
          status: 'Default'
        }
      },
    }, {
      dataIndex: 'action',
      hideInSetting:true,
      search: false,
      fixed: 'right',
      width: 100,
      render: (text, record) => {
        return <>
          <Space>
            <HomeModal title={'编辑'} record={record} />
          </Space>
        </>
      }
    }


  ]

  /**
   *  列配置
   * @param dataIndex 列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法
   * @param title 列标题
   * @param width 列宽度
   * @param fixed 列是否固定在左侧或者右侧，true 表示固定在左侧
   */

  const headerButtons = <HomeModal tableActionRef={actionRef} title={'新建'} />
  return (<>
    <></>
    {/*<ZoomTablePro<DataType, SearchProps>*/}
    {/*  bordered*/}
    {/*  forwardRefProp={ref}*/}
    {/*  rowKey={'orderId'}*/}
    {/*  zoomColumns={columnsInit}*/}
    {/*  search={{ 'orderStatus': 'open' }}*/}
    {/*  url={'/es/query'}*/}
    {/*/>*/}
    <ProZoomTable<DataType>
      rowKey={'orderId'}
      actionRef={actionRef}
      zoomColumns={columnsInit}
      url={'/es/query'}
      headerTitle={headerButtons}
      scroll={{ y: 'calc(100vh - 350px)' }}
      tableStyle={{
        minHeight:500,
        height: 'calc(100vh - 300px)',
      }}
      // components={
      //   {
      //     header: { cell: ResizeableTitle }
      //   }
      // }
      columnsState={{
        onChange: (value: Record<string, ColumnsState>) => {
          console.log(value)
          return value
        }
      }}
    />
  </>)
}

export default Home